<template>
<div class="Login" v-height>
    <i class="el-icon-caret-right" @click="routerPush(sys)"></i>
    <el-row>
        <el-col :md="12" :offset="6">
            <div class="isCurrent">
                <h1 class="text-center">
                    {{ config.basic }}
                    <small>{{ systemSplit.title }}</small>
                </h1>
                <el-tabs v-model="isCurrent" @tab-click="handleClick" :stretch="true">
                    <el-tab-pane label="账号密码登录" name="Account">
                        <Account></Account>
                    </el-tab-pane>
                    <el-tab-pane label="手机号登录" name="Phone">
                        <Phone></Phone>
                    </el-tab-pane>
                </el-tabs>
                <el-col :md="24">
                    <footer class="login_bottom">
                        <editPassword>忘记密码</editPassword>
                        <el-button type="text" @click="routerPush('Register')">信息员注册</el-button>
                    </footer>
                </el-col>
                <el-col :md="24">
                    <div class="mCodeUrl" ref="qrCodeUrl"></div>
                    <h5 class="text-center">访问手机端</h5>
                </el-col>
            </div>
        </el-col>
    </el-row>
    <CopyRight>{{ config.copyright }}</CopyRight>
</div>
</template>

<script>
import Account from "./Account/Account";
import Phone from "./Phone/Phone";
import editPassword from "./editPassword/editPassword";
import QRCode from 'qrcodejs2'
import {
    mapState,
    mapGetters
} from "vuex";
export default {
    data() {
        return {
            sys: "Landed",
            isCurrent: "Account",
            mCodeUrl: require("@/assets/m.png"),
        };
    },
    computed: {
        ...mapState(['config']),
        ...mapGetters({
            systemSplit: 'systemSplit'
        }),
    },
    components: {
        Account,
        Phone,
        editPassword
    },
    watch: {
        $route() {
            location.reload()
        }
    },
    created() {
        if (localStorage.getItem('SYS_TYPE') === 'SS1') {
            this.sys = 'Landed'
        } else if (localStorage.getItem('SYS_TYPE') === 'SS2') {
            this.sys = 'Login'
        }
        // localStorage.clear()
        // this.$common.getAdministrativeList().then((res) => {
        //   let options = JSON.parse(
        //     JSON.stringify(res.data.treeItem, [
        //       "administrativeName",
        //       "administrativeCode",
        //       "children",
        //     ])
        //   );
        //   options = convertKey(options, {
        //     administrativeName: "label",
        //     administrativeCode: "value",
        //   });
        //   localStorage.setItem(
        //     "getTreeData/setAsyncVillageData",
        //     JSON.stringify(options)
        //   );
        //   this.$store.dispatch("getTreeData/setAsyncVillageData");
        // });
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
        routerPush(name) {
            this.$router.push({
                name: name,
            });
        },
    },
    mounted() {
        new QRCode(this.$refs.qrCodeUrl, {
            text: location.origin + '/h5',
            width: 128,
            height: 128,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
        })
    }
};
</script>

<style lang="scss">
.Login {
    background-image: url(../../assets/background.png);
    background-size: cover;
    background-position: center top;
    position: relative;
    overflow: hidden;

    .el-icon-caret-right {
        position: absolute;
        right: 0;
        top: 0;
        transform: rotate(-45deg) scale(3);
        color: red;
        z-index: 9999;
    }

    .text-center {
        text-align: center;
    }

    .el-tabs {
        background: none;
    }

    .isCurrent {
        width: 350px;
        overflow: hidden;
        height: auto;
        margin: 0 auto;

        .mCodeUrl {
            width: 128px;
            height: 128px;
            margin: 50px auto 20px;
            display: block;
        }

        .login_bottom {
            display: flex;
            justify-content: space-between;
        }

        h6 {
            font-weight: normal;
        }

        h1 {
            margin-top: 114px;
            margin-bottom: 30px;
            font-family: "微软雅黑";
            font-weight: normal;
            font-size: 28px;
            letter-spacing: 0px;
            color: #333333;

            small {
                margin-top: 10px;
                display: block;
            }
        }
    }
}
</style>
